<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Full Effects Test Suite</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="../../include/css/documentation.css" type="text/css" />
    <script src="../../MochiKit/MochiKit.js" type="text/javascript"></script>
    <style type="text/css">
#demo {
}

#demo li {
    color: #8ba726;
    font-size: 1.2em;
}

#democontainer {
    margin: 30px 5px 0px 5px;
}

#demoall {
    position: absolute;
    top: 250px;
    left: 400px;
    font-size: 20px;
    background: #f3f3f3;
    color: #1C1D1F; 
    text-align: center;
    border: 1px solid #ccc;
    width: 150px;
    height: 150px;
}
    </style>
</head>

<body>
<div class="document">
<div class="section">
<h1>Full Effects Test Suite</h1>
<ul id="demo">
    <li onclick="setStyle('demoall', {'display': 'block'});fade('demoall')">fade</li>
    <li onclick="setStyle('demoall', {'display': 'none'});appear('demoall')">appear</li>
    <li onclick="setStyle('demoall', {'display': 'block'});puff('demoall')">puff</li>
    <li onclick="blindDown('demoall')">blindDown</li>
    <li onclick="setStyle('demoall', {'display': 'block'});blindUp('demoall')">blindUp</li>
    <li onclick="switchOff('demoall')">switchOff</li>
    <li onclick="slideDown('demoall')">slideDown</li>
    <li onclick="slideUp('demoall')">slideUp</li>
    <li onclick="setStyle('demoall', {'display': 'block'});dropOut('demoall', {'distance': 500})">dropOut</li>
    <li onclick="setStyle('demoall', {'display': 'block'});shake('demoall')">shake</li>
    <li onclick="setStyle('demoall', {'display': 'block'});pulsate('demoall')">pulsate</li>
    <li onclick="setStyle('demoall', {'display': 'block'});squish('demoall')">squish</li>
    <li onclick="setStyle('demoall', {'display': 'block'});fold('demoall')">fold</li>
    <li onclick="grow('demoall')">grow</li>
    <li onclick="setStyle('demoall', {'display': 'block'});shrink('demoall')">shrink</li>
    <li onclick="setStyle('demoall', {'display': 'block'});Highlight('demoall', {startcolor: '#ffff33'})">Highlight</li>
    <li onclick="setStyle('demoall', {'display': 'block'});Morph('demoall', {'style': {'font-size': '3px'}, 'queue': 'start'});Morph('demoall', {'style': {'font-size': '20px'}, 'queue': 'end'});">Morph font</li>
    <li onclick="setStyle('demoall', {'display': 'block'});Morph('demoall', {'style': {'background-color': 'red'}, 'queue': 'start'});Morph('demoall', {'style': {'background-color': '#f3f3f3'}, 'queue': 'end'});">Morph color</li>
    <li onclick="toggle('demoall', 'blind')">toggle (blind)</li>
    <li onclick="toggle('demoall', 'slide')">toggle (slide)</li>
    <li onclick="toggle('demoall', 'appear')">toggle (appear)</li>
    <li onclick="toggle('demoall', 'size')">toggle (size)</li>
</ul>
<div id="demoall">
    <div id="democontainer">Click on one of the left to see the effect</div>
</div>
</div>
</div>
</body>
</html>
